<template>
  <div class="ShowLogs">
    <p class="icon-line">
      <span class="goBack" @click='goBack'><i class="el-icon-back"></i></span>
      <span class="edit" @click='edit' v-if="(log.author_id==userInfo.id)"><i class="el-icon-edit"></i></span>
    </p>
    <el-divider content-position="left">
      <el-avatar :size="60"
        :src="(log.img_url ?('http://www.aynu.xyz:8000' + log.img_url) : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')">
      </el-avatar>
    </el-divider>
    <p class="authorInfo">
      <span class="user_name">{{ log.author_name ? ('@'+log.author_name) : '匿名'}}</span>
      <span>·</span>
      <span>{{log.creator_time | timeFormat}}</span>
    </p>
    <h3>{{log.title}}</h3>
    <el-divider></el-divider>
    <article class="content-main markdown-body" v-html="log.html_content"></article>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        log: {},
        userInfo: {},
      }
    },
    created() {
      this.getLog()
      const userInfo = window.sessionStorage.getItem('userInfo')
      this.userInfo = JSON.parse(userInfo)
    },
    methods: {
      getLog: async function () {
        const id = this.$route.params.id
        if (!id) {
          return
        }
        const {
          data: res
        } = await this.$http.get('/logs/' + (id || ''))
        if (res.meta.success == false) return this.$message.error(res.meta.message)
        this.log = res.data
        this.log.html_content = this.$marked(this.log.content)
        window.sessionStorage.setItem('Log', JSON.stringify(res.data))

      },
      //返回
      goBack: function () {
        this.$router.back(-1)
      },
      //修改日志
      edit: function () {
        const id = this.$route.params.id
        this.$router.push('/logs/edit/' + (id || ''))
      }
    },
    filters: {
      timeFormat: function (dateStr) {
        var date = new Date(dateStr);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        return `${year}年${month}月${day}日  ${h}:${m}:${s}`
      }
    }
  }

</script>

<style lang="less">
  //展示日志
  .ShowLogs {

    //图片行
    .icon-line {
      margin: 10px 0;
      height: 40px;
      overflow: hidden;

      //后退按钮
      .goBack {
        float: left;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
      }

      .goBack:hover {
        color: goldenrod;
      }

      //编辑按钮
      .edit {
        float: right;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
      }

      .edit:hover {
        color: goldenrod;
      }
    }

    //作者信息
    .authorInfo {
      margin: 0;
      padding: 5px 20px;
      font-size: 14px;
      color: #666;
      text-align: right;

      //用户名
      .user_name:hover {
        cursor: pointer;
        color: rgb(255, 208, 0);
      }
    }

    //日志内容主题区域
    .content-main {
      text-align: left;
    }

    //GitHub-markdown-css
    .markdown-body {
      box-sizing: border-box;
      min-width: 200px;
      max-width: 980px;
      margin: 0 auto;
      padding: 45px;
    }

    @media (max-width: 767px) {
      .markdown-body {
        padding: 15px;
      }
    }
  }

</style>
